<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>武耐后台管理系统</title>
    <style>
      .app-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #121825 0%, #1a2337 100%);
        z-index: 9999;
        transition: opacity 0.3s;
      }
      .app-loading.fade-out {
        opacity: 0;
      }
      .app-loading__spinner {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        border-top-color: #0051ff;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
      }

      .app-loading__logo {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        animation: pulse 2s ease-in-out infinite;
      }

      .app-loading__text {
        color: rgba(255, 255, 255, 0.7);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
          'Helvetica Neue', sans-serif;
        font-size: 16px;
        margin: 0;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.1);
          opacity: 0.8;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      @media (prefers-color-scheme: light) {
        .app-loading {
          background: linear-gradient(135deg, #f8faff 0%, #e8eeff 100%);
        }
        .app-loading__text {
          color: rgba(26, 35, 55, 0.7);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="app-loading">
        <div class="app-loading__logo">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 4L4 14V34L24 44L44 34V14L24 4Z" fill="url(#paint0_linear)" />
            <path d="M24 24L4 14L24 4L44 14L24 24Z" fill="url(#paint1_linear)" />
            <path d="M24 24V44L44 34V14L24 24Z" fill="url(#paint2_linear)" opacity="0.8" />
            <path d="M24 24V44L4 34V14L24 24Z" fill="url(#paint3_linear)" opacity="0.6" />
            <defs>
              <linearGradient id="paint0_linear" x1="4" y1="4" x2="44" y2="44" gradientUnits="userSpaceOnUse">
                <stop stop-color="#0051FF" />
                <stop offset="1" stop-color="#7B2FF0" />
              </linearGradient>
              <linearGradient id="paint1_linear" x1="4" y1="4" x2="44" y2="24" gradientUnits="userSpaceOnUse">
                <stop stop-color="#0051FF" />
                <stop offset="1" stop-color="#7B2FF0" />
              </linearGradient>
              <linearGradient id="paint2_linear" x1="24" y1="24" x2="44" y2="44" gradientUnits="userSpaceOnUse">
                <stop stop-color="#0051FF" />
                <stop offset="1" stop-color="#7B2FF0" />
              </linearGradient>
              <linearGradient id="paint3_linear" x1="4" y1="14" x2="24" y2="44" gradientUnits="userSpaceOnUse">
                <stop stop-color="#0051FF" />
                <stop offset="1" stop-color="#7B2FF0" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <p class="app-loading__text">Loading...</p>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      // Remove loading screen when app is mounted
      window.addEventListener('load', () => {
        const loadingScreen = document.querySelector('.app-loading')
        if (loadingScreen) {
          loadingScreen.classList.add('fade-out')
          setTimeout(() => {
            loadingScreen.remove()
          }, 300)
        }
      })
    </script>
  </body>  
</html>
